<template>
<div>

  <el-select v-model="searchByClass" placeholder="选择班级">
    <el-option
      v-for="item in classList"
      :key="item.id"
      :label="item.lxClazzName"
      :value="item.id">
    </el-option>
  </el-select>
  <el-input
    style="width: 220px;margin-left: 20px"
    placeholder="请输入学号"
    v-model="searchByName"
    prefix-icon="el-icon-search"
    type="number"
    clearable>
  </el-input>
  <el-button type="primary" plain @click="searchBtnClick">查询</el-button>
  <el-button type="success" plain @click="searchResetBtnClick">重置</el-button>
  <div style="margin: 20px 0;"></div>
<!--  微信绑定表格-->
  <el-table
    ref="multipleTable"
    border
    :data="userWechatList"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">

    </el-table-column>
    <el-table-column
      prop="date"
      label="序号"
      width="80">
      <template slot-scope="scope">
        {{ scope.$index + 1 }}
      </template>
    </el-table-column>
    <el-table-column
      prop="lxClazzName"
      label="班级名"
      width="200">
    </el-table-column>
    <el-table-column
      prop="lxUserNumber"
      label="学号">
    </el-table-column>
    <el-table-column
      prop="lxUsername"
      label="姓名">
    </el-table-column>


    <el-table-column
      label="操作"
      width="220">
      <template slot-scope="scope">

        <el-button @click="handleDeleteClick(scope.row)" type="danger" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="bottom" style="margin-bottom: 0;margin-top: 10px">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[8, 10, 20, 40]"
      :page-size="pagesize"
      :background='true'
      :pager-count="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total" class="pageControl">
    </el-pagination>
  </div>


</div>
</template>

<script>
export default {
  name: "WechatBindIndex",
  data(){
    return{
      currentPage:1,
      pagesize:8,
      total:0,
      pageNum:1,
      userWechatList:[
        // {
        //   id:'',
        //   lxOpenid:'',
        //   lxUserNumber:'',
        //   lxUsername:'',
        //   lxClazzName:'',
        // }
      ],
      searchByName:'',
      searchByClass:'',
      search:false,
      classList:[
        //   {
        //   id:'',
        //   lxClazzName:'',
        //   lxTeacher:"",
        //   lxTeacherName:'',
        //   lxClazzPeopleNum:'',
        // }
      ],

    }
  },
  mounted() {
    this.$emit('getMessage', ["系统设置","微信关联设置"]);
    this.load();
    this.messageNotify();
  },
  methods:{
    load(){
      // this.$http.post('/wechatBind/index').then(res => {
      //   this.userWechatList = res.data.data;
      //   console.log("res", res)
      //   console.log("this.userWechatList", this.userWechatList)
      // });

      if(this.search){
        console.log("queryBykey")
        this.searchBtnClick()
      }else {
        console.log("queryAll")
        this.$http.get('/wechatBind/indexByPage',{params:{currentPage:this.currentPage,pagesize:this.pagesize}}).then(res=>{
          console.log("this.currentPage",this.currentPage)
          this.userWechatList=res.data.data.records;
          this.total=res.data.data.total;
          this.pageNum=res.data.data.pageNum;
          console.log("this.userWechatList",res)
          console.log("this.userWechatList",this.userWechatList)

        });
      }

      this.$http.post('/clazz/index').then(res => {
        this.classList = res.data.data;
        console.log("/clazz/index", res)
        console.log("this.classList", this.classList)
      });

    },//load结束
    handleSizeChange:function(size){
      //选择 一页展示多少数据时 调用的方法
      this.pagesize = size;
      console.log(size+"****");
      this.currentPage=1;
      this.load()
    },
    handleCurrentChange:function(currentPage){
      //点击页面项 的函数响应
      this.currentPage = currentPage;
      console.log("this.currentPage = currentPage;",this.currentPage)
      this.load()
    },
    messageNotify(){  //消息通知
      this.$notify({
        title: '提示',
        message: '删除记录后需要重新扫码二维码进行绑定',
        type: 'warning',
        duration: 4500
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    searchBtnClick(){ //根据条件查询
      console.log("searchBtnClisk",this.searchByClass,this.searchByName)
      this.search=true;
      if (this.searchByName!=''){
        console.log("searchBtnClisk searchByName")
        this.$http.post('/wechatBind/queryByUserNumber',this.searchByName).then(res => {
          this.userWechatList=[]
          if (res.data.data==null){
            this.total=this.userWechatList.length
          }else {
            this.userWechatList.push(res.data.data)
            this.total=this.userWechatList.length
          }

          console.log("res", res)
          console.log("this.userWechatList", this.userWechatList)
        });

      }else if(this.searchByClass!=null&&this.searchByClass!=''&&this.searchByName==''){
        console.log("searchBtnClisk searchByClass")
        this.$http.get('/wechatBind/queryByClazzPage',{params:{currentPage:this.currentPage,pagesize:this.pagesize,id:this.searchByClass}}).then(res => {
          this.userWechatList=res.data.data.records;
          this.total=res.data.data.total;
          this.pageNum=res.data.data.pageNum;
          console.log("res", res)
          console.log("this.userWechatList", this.userWechatList)
        });
      }else{
        console.log("searchBtnClisk is null")
      }

    },searchResetBtnClick(){  //重置搜索条件
      this.searchByName=''
      this.searchByClass="";
      this.search=false;
      this.currentPage=1
      this.load()
    },
    handleDeleteClick(rows){  //根据id删除教师
      console.log("delete rows",rows);
      var id=rows.id
      this.$confirm('此操作将删除该学生绑定微信信息，可在扫码后重新绑定, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log("postid",id)
        this.$http.post('/wechatBind/deleteById',id).then(res=>{
          console.log("res",res)
          this.load()
          if (res.data.state==200){ //成功删除弹窗
            setTimeout(this.$message({
              type: 'success',
              message: '删除成功!'
            }),1000)
          }else {
            this.$message.error('删除失败！');
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },


  },
}
</script>

<style scoped>

</style>
